<template>
  <div>
    <div class="search">
      <a-card class="search-card">
        <div class="search-top">
          <span>筛选搜索</span>
          <a-button class="search-btn" type="primary">查询结果</a-button>
        </div>
        <div class="search-buttom">
          输入搜索：
          <a-input
            class="search-text"
            placeholder="品牌名称/关键字"
            style="width: 200px"
          />
        </div>
      </a-card>
    </div>
    <div class="add">
      <a-card class="add-card">
        <div class="add-box">
          <span>数据列表</span>
          <a-button class="add-btn" type="small">添加</a-button>
        </div>
      </a-card>
    </div>
    <div class="commodityType">
      <a-card class="commodityType-card">
        <a-table
          :columns="columns"
          :data-source="data"
          :row-selection="rowSelection"
          bordered
        >
          <span slot="brand_manufacturers">
            <a-switch default-checked @change="onChange" />
          </span>
          <span slot="is_show">
            <a-switch default-checked @change="onChangeShow" />
          </span>
          <span slot="operation" class="operation">
            <a-button> 编辑 </a-button>
            <a-button type="danger"> 删除 </a-button>
          </span>
        </a-table>
      </a-card>

    </div>

  </div>
</template>

<script>
const columns = [
  {
    title: '编号',
    dataIndex: 'brand_id',
    align: 'center'
  },
  {
    title: '品牌名称',
    dataIndex: 'brand_name',
    align: 'center',
    width: 300
  },
  {
    title: '品牌首字母',
    dataIndex: 'brand_letter',
    align: 'center'
  },
  {
    title: '排序',
    dataIndex: 'brand_sorting',
    align: 'center'
  },
  {
    title: '品牌制造商',
    dataIndex: 'brand_manufacturers',
    scopedSlots: { customRender: 'brand_manufacturers' },
    align: 'center'
  },
  {
    title: '是否显示',
    dataIndex: 'is_show',
    scopedSlots: { customRender: 'is_show' },
    align: 'center'
  },
  {
    title: '相关',
    dataIndex: 'related',
    align: 'center'
  },
  {
    title: '操作',
    dataIndex: 'operation',
    scopedSlots: { customRender: 'operation' },
    align: 'center'
  }
]

const data = [
  {
    key: '1',
    brand_id: '1',
    brand_name: '小米',
    brand_letter: 'X',
    brand_sorting: '1',
    related: '评价：10'
  },
  {
    key: '2',
    brand_id: '2',
    brand_name: '华为',
    brand_letter: 'H',
    brand_sorting: '2',
    related: '评价：10'
  },
  {
    key: '3',
    brand_id: '3',
    brand_name: '苹果',
    brand_letter: 'P',
    brand_sorting: '3',
    related: '评价：10'
  }
]

const rowSelection = {
  onChange: (selectedRowKeys, selectedRows) => {
    console.log(
      `selectedRowKeys: ${selectedRowKeys}`,
      'selectedRows: ',
      selectedRows
    )
  },
  onSelect: (record, selected, selectedRows) => {
    console.log(record, selected, selectedRows)
  },
  onSelectAll: (selected, selectedRows, changeRows) => {
    console.log(selected, selectedRows, changeRows)
  }
}

export default {
  data() {
    return {
      data,
      columns,
      selectedRowKeys: [], // Check here to configure the default column
      loading: false,
      rowSelection
    }
  },
  methods: {
    // 制造商滑块
    onChange(checked) {
      console.log(`a-switch to ${checked}`)
    },
    // 是否显示滑块
    onChangeShow(checked) {
      console.log(`a-switch to ${checked}`)
    }
  }
}
</script>

<style lang="scss">
.search {
  .search-card {
    margin: 20px;
    .search-top {
      display: flex;
      justify-content: space-between;
      font-size: 16px;
    }
    .search-buttom {
      margin-left: 20px;
    }
  }
}

.add {
  .add-card {
    margin: 20px;
    .add-box {
      display: flex;
      justify-content: space-between;
      span {
        font-size: 16px;
      }
    }
  }
}

.commodityType {
  margin: 20px;
  .operation {
    .ant-btn {
      margin-right: 5px;
    }
  }
}

</style>
